<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Web Audio API Demo</title>
  <style>
    #v{
      border: 1px solid #c0c0c0;
    }
    #url{
      margin: 10px 0;
      width: 500px;
      height: 20px;
    }
  </style>
</head>
<body>
<canvas id="v" width="1024" height="300"></canvas>
<div id="controll">
  <p>
    <input type="file" id="music"  accept="audio/*">
    <audio id="audioSource"></audio>
    <button id="start">开始</button>
    <button id="stop">停止</button>
  </p>

  <p>
    <input type="range" style="width:300px" id="gainBtn">
  </p>
  
  <span>
    <label>低通<input name="filterName" type="radio" class="filter" value="lowpass"></label>
    <label>高通<input name="filterName" type="radio" class="filter" value="highpass"></label>
    <label>带通<input name="filterName" type="radio" class="filter" value="bandpass"></label>
    <label>全部<input name="filterName" checked type="radio" class="filter" value="allpass"></label>
  </span>
</div>

<script src="../lib/jquery/dist/jquery.min.js"></script>
<script src="./src/player.js"></script>

<script>
(function($){
  var ctx = document.querySelector("#v").getContext('2d');
  var player = new Player({
    dataCallback:function(data){
      ctx.clearRect(0, 0, 1024,500);
      var grd=ctx.createLinearGradient(0,0,0,400);
      grd.addColorStop(0,"rgb(255,0,0)");
      grd.addColorStop(1,"rgb(255,255,0)");
      for(var i=0;i<1024;i++){
        ctx.beginPath();
        ctx.strokeStyle = grd;
        ctx.moveTo(i,500);
        ctx.lineTo(i,data[i])
        ctx.stroke();        
      }
    }
  });

  $("#music").change(function(){
    var fr = new FileReader();
    fr.onload = function(e){
      var r = e.target.result;
      player.addFile(r,function(){
        console.log("加载完成");
      });
    };
    fr.readAsArrayBuffer(this.files[0]);
  });

  $("#gainBtn").change(function(){
    player.volume(this.value/100);
  });

  $("#start").click(function(){
    player.playLocal();
  });

  $("#stop").click(function(){
    player.stop();
  });

  $(".filter").click(function(){
    player.filter(this.value);
  });
})(jQuery);


</script>
</body>
</html>
